import 'package:flutter/material.dart';

/**
 *  CustomeScrollView的子组件只能是Sliver系列，所以如果你想将一个普通组件塞进CustomScrollView，
 * 那么务必将该组件用SliverToBoxAdapter包裹
 *
 * SliverAppBar：创建一个可以放置在CustomScrollView中的material design应用程序栏.
   SliverPersistentHeader：创建一个长条，当它被滚动到视图的开始时，长条的大小会发生变化。
   SliverFillRemaining：创建填充视图中剩余空间的条块
   SliverToBoxAdapter：创建包含单个框小部件的条子.
   SliverPadding：创建一个条子，该条子在另一条条子的每一边应用填充.

 *
 */

class ScroolSlivePage extends StatefulWidget {
  ScroolSlivePage({Key key}) : super(key: key);

  @override
  _ScroolSlivePageState createState() => _ScroolSlivePageState();
}

class _ScroolSlivePageState extends State<ScroolSlivePage>
    with TickerProviderStateMixin {
  TabController _controller;
  final List<Color> colorList = [
    Colors.red,
    Colors.orange,
    Colors.green,
    Colors.purple,
    Colors.blue,
    Colors.yellow,
    Colors.pink,
    Colors.teal,
    Colors.deepPurpleAccent
  ];

  @override
  void initState() {
    super.initState();
    _controller = new TabController(initialIndex: 0, vsync: this, length: 8);
  }

  // Text组件需要用SliverToBoxAdapter包裹，才能作为CustomScrollView的子组件
  Widget renderTitle(String title) {
    return SliverToBoxAdapter(
      child: Padding(
        padding: EdgeInsets.symmetric(vertical: 16),
        child: Text(
          title,
          textAlign: TextAlign.center,
          style: TextStyle(fontSize: 20),
        ),
      ),
    );
  }

  /**
   *
   * SliverAppBar最重要的几个属性在上面的例子中罗列出来。其中：
    expandedHeight：展开状态下appBar的高度，即图中图片所占空间；
    flexibleSpace：空间大小可变的组件，Flutter给我们提供了一个现成的FlexibleSpaceBar组件，给我们处理好了title过渡的效果。
    另外，floating/snap/pinned这三个属性可以指定SliverAppBar内容滑出屏幕之后的表现形式。

    float：向下滑动时，即使当前CustomScrollView不在顶部，SliverAppBar也会跟着一起向下出现；
    snap：当手指放开时，SliverAppBar会根据当前的位置进行调整，始终保持展开或收起的状态；
    pinned：不同于float效果，当SliverAppBar内容滑出屏幕时，将始终渲染一个固定在顶部的收起状态组件。
    需要注意的是：snap效果一定要在float为true时才会生效。另外，你也可以将这三者进行组合使用。
   *
   *
   */
  Widget renderHeader() {
    return SliverAppBar(
      floating: false,
      snap: false,
      pinned: true,
      expandedHeight: 250,
      flexibleSpace: FlexibleSpaceBar(
        title: Text("看看效果哦"),
        background: Image.network(
          'http://img1.mukewang.com/5c18cf540001ac8206000338.jpg',
          fit: BoxFit.cover,
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // appBar: AppBar(
      //   title: Text("CustomScrollView"),
      // ),
      body: CustomScrollView(slivers: [
        renderHeader(),
        SliverPersistentHeader(
          // 可以吸顶的TabBar
          pinned: true,
          delegate: StickyTabBarDelegate(
              child: Container(
            height: 60,
            color: Colors.red,
            child: TabBar(
              isScrollable: true,
              labelColor: Colors.black,
              controller: this._controller,
              tabs: <Widget>[
                Tab(text: 'Home'),
                Tab(text: 'Profile'),
                Tab(text: 'Home'),
                Tab(text: 'Profile'),
                Tab(text: 'Home'),
                Tab(text: 'Profile'),
                Tab(text: 'Home'),
                Tab(text: 'Profile')
              ],
            ),
          )),
        ),
        // renderTitle('SliverGrid'),
        // SliverGrid.count(
        //   crossAxisCount: 3,
        //   children: colorList.map((color) => Container(color: color)).toList(),
        // ),
        // renderTitle('SliverList'),
        // SliverFixedExtentList(
        //   // SliverList的语法糖，用于每个item固定高度的List
        //   delegate: SliverChildBuilderDelegate(
        //     (context, index) => Container(color: colorList[index]),
        //     childCount: colorList.length,
        //   ),
        //   itemExtent: 100,
        // ),
        // 剩余补充内容TabBarView
        SliverFillRemaining(
          child: TabBarView(
            controller: this._controller,
            children: <Widget>[
              Center(child: Text('Content of Home')),
              Center(child: Text('Content of Profile')),
              Center(child: Text('Content of Home')),
              Center(child: Text('Content of Profile')),
              Center(child: Text('Content of Home')),
              Center(child: Text('Content of Profile')),
              Center(child: Text('Content of Home')),
              Center(child: Text('Content of Profile')),
            ],
          ),
        )
      ]),
    );
  }
}

/**
 *
 *
 * minExtent：收起状态下组件的高度；
   maxExtent：展开状态下组件的高度；
   shouldRebuild：类似于react中的shouldComponentUpdate；
   build：构建渲染的内容。
 */

class StickyTabBarDelegate extends SliverPersistentHeaderDelegate {
  final Widget child;

  StickyTabBarDelegate({@required this.child});
  /**shrinkOffset 它代表当前头部的滚动偏移量 */
  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return this.child;
  }

  @override
  double get maxExtent => 60;

  @override
  double get minExtent => 60;

  @override
  bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) {
    return true;
  }
}



